<template>
	<view class="container flex--row">
		<view class="score-bar">
			<view class="bar-progress" :style="{width:percentage+'%'}"></view>
		</view>
		<view class="bar-ball" :style="{left:percentage+'%'}" @touchmove="calcScore"></view>
	</view>

</template>

<script>
	export default{
		props:['score'],
		emits:['changeScore'],
		computed:{
			percentage(){
				return this.score*10
			}
		},
		methods:{
			calcScore(event){
				const {clientX} = event.changedTouches[0];
				const query = uni.createSelectorQuery().in(this);
				query
				  .select(".score-bar")
				  .boundingClientRect((data) => {
					const {left,width} = data
					
					let score = (((clientX - left) / width)*10).toFixed(1)
					if(score < 0 || score > 10){
						return 
					}
					this.$emit("changeScore",score)
				  })
				  .exec();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.text--secondary-dark{
		font-size: 18px;
		font-weight: 600;
		color:#333;
	}
	
	.container{
		position:relative;
		width:80%;
	}
	
	.score-bar{
		width:100%;
		height:32rpx;
		border-radius: 24px;
		border:1.5px solid #383838;
		position:relative;
		overflow: hidden;
	
	}
	.bar-progress{
		position:absolute;
		left:0%;
		top:50%;
		transform: translate(0%,-50%);
		
		height:52rpx;
		width:0%;
		border-radius: 24px;
		background-color: $main-color;
	}
	.bar-ball{
		position:absolute;
		left:0;
		top:50%;
		transform: translate(-50%,-50%);
		width:72rpx;
		height:72rpx;
		border-radius: 100%;
		background-image: url("/static/comment/ball.svg");
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	
	
	
</style>